<template>
  <div class="show_config">
    <div class="b-f p-d">
      <el-form ref="formDataRef" :model="form" label-width="180px">
        <el-form-item>
          <span class="title">设置本体或图谱的可视化默认展示样式</span>
        </el-form-item>
        <el-form-item label="节点标签：">
          <el-radio-group v-model="form.nodeLabel">
            <el-radio label="文字置底">文字置底</el-radio>
            <el-radio label="文字内嵌">文字内嵌</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="节点文字：">
          <el-input-number
            v-model="form.textSize"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="边文字：">
          <el-input-number
            v-model="form.sideSize"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="本体类属性节点：">
          <el-radio-group v-model="form.ontologyPropertyNode">
            <el-radio label="默认展开">默认展开</el-radio>
            <el-radio label="默认收起">默认收起</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="实体属性节点：">
          <el-radio-group v-model="form.entityPropertyNode">
            <el-radio label="默认展开">默认展开</el-radio>
            <el-radio label="默认收起">默认收起</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="本体布局方式：">
          <el-select v-model="form.ontologyLayoutWay" placeholder="请选择">
            <el-option
              v-for="item in layoutLists"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图谱布局方式：">
          <el-select v-model="form.graphLayoutWay" placeholder="请选择">
            <el-option
              v-for="item in TPLists"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" size="small" @click="save"
            >保存设置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        entityPropertyNode: '默认展开',
        graphLayoutWay: 'random',
        nodeLabel: '文字置底',
        ontologyLayoutWay: 'random',
        ontologyPropertyNode: '默认展开',
        sideSize: 10,
        textSize: 10,
      },
      layoutLists: [
        {
          label: '随机布局',
          value: 'random',
        },
        {
          label: '力导布局',
          value: 'force',
        },
        {
          label: '环形布局',
          value: 'circular',
        },
        {
          label: '辐射状布局',
          value: 'radial',
        },
        {
          label: '树状布局',
          value: 'dagre',
        },
        {
          label: '同心圆布局',
          value: 'concentric',
        },
        {
          label: '网格布局',
          value: 'grid',
        },
      ],
      TPLists: [
        {
          label: '随机布局',
          value: 'random',
        },
        {
          label: '力导布局',
          value: 'force',
        },
        {
          label: '环形布局',
          value: 'circular',
        },
        {
          label: '辐射状布局',
          value: 'radial',
        },
        {
          label: '树状布局',
          value: 'dagre',
        },
        {
          label: '同心圆布局',
          value: 'concentric',
        },
        {
          label: '网格布局',
          value: 'grid',
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.$axios
        .get(this.$api.setting.showConfigApi.getConfigDetail)
        .then((res) => {
          const { data, code } = res.data;
          if (code == 200) {
            this.form = {
              ...this.form,
              ...data,
            };
          }
        });
    },

    save() {
      this.$refs['formDataRef'].validate((valid) => {
        if (valid) {
          this.$axios
            .post(this.$api.setting.showConfigApi.saveConfig, this.form)
            .then((res) => {
              const { code } = res.data;
              if (code == 200) {
                this.$message.success('保存成功!');
                this.getDetail();
              }
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  color: #ababab;
}
</style>
